<template>
  <div>
    <el-table
      :data="tableData"
      @current-change="handleCurrentChange"
      style="width: 100%">
      <el-table-column label="地址" width="340">
        <template slot-scope="scope">
          <i v-bind:class="scope.row.choose_state"></i>
          <span style="margin-left: 10px">{{ scope.row.address }}</span>
        </template>
      </el-table-column>
      <el-table-column label="账号" width="100">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleExport(scope.$index, scope.row)">导出
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <popup v-model="privateShow" height="100%" v-transfer-dom>  <!--vux  v-transfer-dom 指令 -->
      <divider>{{ exportName}}</divider>
      <x-input title="地址" readonly v-model="exportKey"></x-input>
      <x-input title="私钥" readonly v-model="exportPrivateKey">}</x-input>
      <box class="seedSave">
        <x-button type="primary" v-clipboard="exportPrivateKey" @success="copySuccess" @error="copyError">复制私钥到剪切板
        </x-button>
        <x-button type="primary" @click.native="privateShow=false">已保存好</x-button>
      </box>
    </popup>

  </div>
</template>

<script>
  import {TransferDom, Divider, XHeader, XInput, XButton, Box, Popup, XTextarea} from 'vux';

  export default {
    name: "ContentC",
    directives: {
      TransferDom
    },
    components: {
      "x-header": XHeader,
      "x-input": XInput,
      "x-button": XButton,
      "box": Box,
      "popup": Popup,
      "x-textarea": XTextarea,
      "divider": Divider
    },
    data() {
      return {
        tableData: [],
        exportKey: "",
        exportName: "",
        exportPrivateKey: "",
        privateShow: false,
        choose_state :"el-icon-time"
      }
    },
    methods: {
      copySuccess() {
      },
      copyError() {
      },
      handleCurrentChange(val) {
        localStorage.default_address = val.address;
        localStorage.default_account_name = val.name;
        console.log(val);
        this.refreshData();
      },
      handleExport(index, row) {
        this.exportName = row.name
        this.exportKey = row.address
        this.exportPrivateKey = row.enc_privateKey
        this.privateShow = true
        console.log("export", index, this.exportName, this.exportKey, this.exportPrivateKey, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
        this.$store.commit("deleteAccount", row.address);
        this.refreshData();
      },
      refreshData: function () {
        var list = []
        if (this.$store.state.wallet) {
          for (var i in this.$store.state.wallet) {
            list.push(this.$store.state.wallet[i])
          }

          for (var r=0; r<list.length; r++){
            if (list[r].address == localStorage.default_address) {
              list[r].choose_state = "el-icon-check";
            }else{
              list[r].choose_state = "el-icon-minus";
            }
          }
        }
        this.tableData = list
      }
    },
    mounted: function () {
      this.refreshData()
    }
  }
</script>
